<template>
	<view class="page">
		<!-- 1. 本地图片选择预览按钮 -->
		<button type="primary" @click="chooseAndPreviewImage">选择并预览本地图片</button>
		<!-- 2. 新增：网络图片下载按钮 -->
		<button type="primary" @click="downloadAndShowImage" style="margin-top: 20rpx;">下载网络图片并显示</button>
		
		<!-- 图片圆形显示区域（复用原有组件） -->
		<view class="circle-container" v-if="imageSrc">
			<view class="circle-mask">
				<image :src="imageSrc" mode="aspectFill" class="circle-img"></image>
			</view>
		</view>

		<!-- 功能分隔线 -->
		<view class="weather-separator"></view>

		<!-- 3. 天气预报功能 -->
		<button type="default" @click="getTomorrowWeather" class="weather-btn">获取明天天气预报</button>
		<view class="weather-card" v-if="tomorrowWeather.date">
			<view class="weather-title">明天天气预报</view>
			<view class="weather-info">
				<view class="weather-item">日期：{{ tomorrowWeather.date }}</view>
				<view class="weather-item">星期：{{ tomorrowWeather.week }}</view>
				<view class="weather-item">最高温：{{ tomorrowWeather.highTemp }}</view>
				<view class="weather-item">最低温：{{ tomorrowWeather.lowTemp }}</view>
			</view>
		</view>
		<view class="weather-error" v-if="weatherError">{{ weatherError }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片相关数据
				imageSrc: '', // 图片显示地址（本地临时路径/下载临时路径）
				downloadProgress: 0, // 网络图片下载进度（0-100）
				// 修正后的网络图片地址（原地址修复：poto→photo，补充_连接分辨率）
				netImageUrl: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
				
				// 天气预报相关数据
				tomorrowWeather: {
					date: '',    
					week: '',    
					highTemp: '',
					lowTemp: ''  
				},
				weatherError: ''
			}
		},
		methods: {
			// 功能1：选择并预览本地图片（原有功能）
			chooseAndPreviewImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempPath = res.tempFilePaths[0]
						this.imageSrc = tempPath
						// 预览本地图片
						uni.previewImage({
							urls: [tempPath],
							current: tempPath,
							className: 'circle-preview'
						})
					}
				})
			},

			// 功能2：新增→下载网络图片+打印进度日志+预览
			downloadAndShowImage() {
				this.downloadProgress = 0 // 重置进度
				uni.downloadFile({
					url: this.netImageUrl,
					// 下载成功回调
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							// 存储下载后的临时路径，用于显示和预览
							this.imageSrc = downloadRes.tempFilePath
							// 预览下载的图片
							uni.previewImage({
								urls: [downloadRes.tempFilePath],
								current: downloadRes.tempFilePath,
								className: 'circle-preview'
							})
						} else {
							console.error('网络图片下载失败，状态码：', downloadRes.statusCode)
						}
					},
					// 下载失败回调
					fail: (err) => {
						console.error('网络图片下载请求失败：', err.errMsg)
					},
					// 实时进度回调（打印日志）
					progress: (progressRes) => {
						this.downloadProgress = Math.floor(progressRes.progress * 100)
						// 打印进度详情：百分比+已下载大小+总大小
						console.log(`
							图片下载进度：${this.downloadProgress}%
							已下载大小：${progressRes.totalBytesWritten} 字节
							文件总大小：${progressRes.totalBytesExpectedToWrite} 字节
						`)
					}
				})
			},

			// 功能3：获取明天天气预报（原有功能）
			getTomorrowWeather() {
				this.tomorrowWeather = { date: '', week: '', highTemp: '', lowTemp: '' }
				this.weatherError = ''
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501', 
					method: 'GET',
					timeout: 10000,
					success: (res) => {
						if (res.statusCode === 200 && res.data?.data?.forecast) {
							const tomorrowData = res.data.data.forecast[1] 
							if (tomorrowData) {
								this.tomorrowWeather.date = tomorrowData.ymd
								this.tomorrowWeather.week = tomorrowData.week
								this.tomorrowWeather.highTemp = tomorrowData.high.replace('最高温 ', '')
								this.tomorrowWeather.lowTemp = tomorrowData.low.replace('最低温 ', '')
							} else {
								this.weatherError = '未查询到明天天气数据'
							}
						} else {
							this.weatherError = '天气接口返回数据异常'
						}
					},
					fail: (err) => {
						this.weatherError = `请求失败：${err.errMsg || '网络异常'}`
						console.error('天气接口请求失败', err)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.circle-container {
		margin-top: 40rpx;
		width: 300rpx;
		height: 300rpx;
	}
	.circle-mask {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		border: 2rpx solid #eee;
	}
	.circle-img {
		width: 100%;
		height: 100%;
	}
	.weather-separator {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin: 50rpx 0;
	}
	.weather-btn {
		background-color: #42b983;
		color: #fff;
		margin-bottom: 30rpx;
	}
	.weather-card {
		width: 100%;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}
	.weather-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 25rpx;
		text-align: center;
	}
	.weather-info {
		display: flex;
		flex-direction: column;
		gap: 18rpx;
	}
	.weather-item {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}
	.weather-error {
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #ff4d4f;
		text-align: center;
	}
</style>

<style>
	/* 图片预览圆形样式（复用原有样式） */
	.circle-preview .wx-preview-image,
	.circle-preview .uni-preview-image {
		border-radius: 50% !important;
		overflow: hidden !important;
		width: 80% !important;
		height: 80% !important;
		margin: 10% auto !important;
	}
	.circle-preview .wx-preview-img,
	.circle-preview .uni-preview-img {
		object-fit: cover !important;
	}
</style>